<!DOCTYPE html>
<html lang="zh_CN" class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>Cherry 柠檬水</title>
    <header th:replace="header::html"></header>
    <link rel="stylesheet" th:href="@{/xadmin/css/login.css}"/>
    <style th:inline="text">
        .layui-form-checked[lay-skin=primary] i {
            border-color: #189F92 !important;
            background-color: #FFF !important;
            color: #597FC0 !important;
            font-weight: bold;
        }

        .layui-form-checkbox[lay-skin=primary] i {
            width: 14px;
            height: 14px;
        }

        .iconcherry {
            font-size: 20px !important;
        }
    </style>
</head>
<body class="login-bg">
<div class="login layui-anim layui-anim-up">
    <div class="message" th:text="#{message.title}"></div>
    <div id="darkbannerwrap"></div>

    <form class="layui-form" id="login-form" autocomplete="off">
        <input id="username" name="username" th:placeholder="#{message.username}" type="text" lay-verify="required"
               autocomplete="off">
        <hr class="hr15">
        <input id="password" name="password" th:placeholder="#{message.password}" type="password" lay-verify="required"
               autocomplete="off">
        <hr class="hr15">
        <input id="verifyCode" name="verifyCode" th:placeholder="#{message.verifyCode}" style="width: 60%" type="text"
               lay-verify="required" autocomplete="off">
        <img th:src="@{/kaptcha/getVerifyCode}" alt="验证码" id="verifyImg">
        <hr class="hr15">
        <div>
            <input type="checkbox" name="remember-me" lay-skin="primary">
            <span>[[#{message.remember}]]</span>
        </div>
        <hr class="hr15">
        <input id="login" lay-filter="login" lay-submit style="width: 100%;" th:value="#{message.biologic}"
               type="button">
        <hr class="hr15">
        <div style="float: right;">
            <a href="/user-register.html">[[#{message.register}]]</a>
            <!--            <a th:href="@{login.html(lang='zh_CN')}">[[#{message.chinese}]]</a>-->
            <!--            <span class="line">|</span>-->
            <!--            <a th:href="@{login.html(lang='en_US')}">[[#{message.english}]]</a>-->
        </div>
        <div style="text-align: right;float: left;">
            <a href="/smslogin.html">[[#{message.smsLogin}]]</a>
        </div>
        <hr class="hr15">
        <div class="coagent">
            <ul>
                <li>
                    <a th:href="@{/authLogin/wechat_open}" class="pdl">
                        <i class="iconcherry icon-weixin"></i>
                    </a>
                    <span class="line">|</span>
                </li>
                <li>
                    <a th:href="@{/authLogin/qq}" class="pdl">
                        <i class="iconcherry icon-QQ"></i>
                    </a>
                    <span class="line">|</span>
                </li>
                <li>
                    <a th:href="@{/authLogin/weibo}" class="pdl">
                        <i class="iconcherry icon-weibo"></i>
                    </a>
                    <span class="line">|</span>
                </li>
                <li>
                    <a th:href="@{/authLogin/alipay}" class="pdl">
                        <i class="iconcherry icon-zhifubao"></i>
                    </a>
                    <span class="line">|</span>
                </li>
                <li>
                    <a th:href="@{/authLogin/dingtalk}" class="pdl">
                        <i class="iconcherry icon-dingding"></i>
                    </a>
                    <span class="line">|</span>
                </li>
                <li>
                    <a th:href="@{/authLogin/gitee}" class="pdl">
                        <i class="iconcherry icon-gitee"></i>
                    </a>
                    <span class="line">|</span>
                </li>
                <li>
                    <a th:href="@{/authLogin/github}" class="pdl">
                        <i class="iconcherry icon-github"></i>
                    </a>
                    <span class="line">|</span>
                </li>
                <li>
                    <a th:href="@{/authLogin/baidu}" class="pdl">
                        <i class="iconcherry icon-baidu"></i>
                    </a>
                    <span class="line">|</span>
                </li>
                <li>
                    <a th:href="@{/authLogin/huawei}" class="pdl">
                        <i class="iconcherry icon-huawei"></i>
                    </a>
                    <span class="line">|</span>
                </li>
                <li>
                    <a th:href="@{/authLogin/aliyun}" class="pdl">
                        <i class="iconcherry icon-aliyun"></i>
                    </a>
                </li>
            </ul>
        </div>
    </form>
</div>
<script type="text/javascript">
    layui.use(['form', 'layer'], function () {
        var form = layui.form,
            layer = layui.layer;

        $('#verifyImg').click(function () {
            $(this).attr('src', '[[@{/kaptcha/getVerifyCode?}]]' + Math.floor(Math.random() * 100));
        });

        //监听提交
        form.on('submit(login)', function (data) {
            //登录提交
            var loading = layer.load();
            $.ajax({
                url: '/login',
                type: 'POST',
                data: $("#login-form").serialize(),
                success: function (datas) {
                    if (datas.authenticated == true) {
                        localStorage.setItem("userId", datas.principal.id);
                        localStorage.setItem("username", datas.principal.username);
                        localStorage.setItem("nickName", datas.principal.nickname);
                        var authorities = datas.authorities;
                        var permission = [];
                        for (var i in authorities) {
                            permission.push(authorities[i].authority);
                        }
                        localStorage.setItem("permission", JSON.stringify(permission));
                        layer.close(loading);
                        layer.msg("登录成功，请稍后~~", {icon: 6, time: 500}, function () {
                            location.href = '/'
                        });
                    } else {
                        layer.close(loading);
                        layer.msg("验证码填写错误或已超时！", {icon: 2});
                        //重新生成验证码
                        $('#verifyImg').attr('src', '[[@{/kaptcha/getVerifyCode?}]]' + Math.floor(Math.random() * 100));
                    }
                },
                error: function (xhr, textStatus, errorThrown) {
                    layer.close(loading);
                    var msg = xhr.responseText;
                    var response = JSON.parse(msg);
                    layer.msg(response.message);
                }
            });
            return false;
        });

        //回车键处理提交
        $(document).keydown(function (e) {
            if (e.keyCode === 13) {
                $("#login").trigger("click");
            }
        });
    });

</script>
</body>
</html>